<template>
    <div class="latestpurchase">
    <ul>
      <van-list
        v-model:loading="state.loading"
        :finished="state.finished"
        finished-text="没有更多了"
        @load="onLoad"
        style="width: 100%;
                padding: 0 5px;
                box-sizing: border-box;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                "
      >
      <li v-for="item in purchaseList" :key="item.id">
        <img :src="item.imgUrl[0]" alt="加载失败">
        <p class="title">{{item.title}}</p>
        <p class="position">
           <em>{{item.distance?item.distance+"km":"无"}}</em>
           <span class="city">
              <van-icon name="map-marked" size="20px" style="margin-right:7px" />
              <span>{{item.production}}</span>
           </span>
        </p>
        <p class="honer">
          <span v-for="(honer,index) in item.requirement" :key="index">{{honer}}</span>
        </p>
        <p class="price">
          <span>{{item.unitPrice}}</span>元一斤
        </p>
      </li>
      </van-list>
    </ul>
  </div>
</template>

<script>
import {onMounted, ref,reactive } from "vue";
export default {
  setup(){
    const count=ref(4);
    //获取最新供应信息
    const purchaseList=ref([]);
    const getLatestPurchase=()=>{
      fetch("http://www.pudge.wang:5000/api/home/list",{
        method:"POST",
        body:JSON.stringify({status:'sellTag'}),
        headers:{'Content-Type' : 'application/json;charset=utf-8'}
      }).then(response=>response.json())
      .then(res=>{
        let arr=res.result;
        for(let item of arr){
          item.requirement=item.requirement.map((value)=>{
            if(value===1){
              value="企业认证"
            }else if(value===2){
              value="实名认证"
            }
            return value;
          })
        }
        let newArr=[];
        for(let i=0;i<count.value;i++){
          newArr.push(arr[i])
        }
        purchaseList.value=newArr;
      })
    };
        //下拉加载
    const state = reactive({
      loading: false,
      finished: false,
    });
    const onLoad = () => {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        count.value+=5;
        getLatestPurchase();
        // 加载状态结束
        state.loading = false;

        // 数据全部加载完成
        if (count.value >= 14) {
          state.finished = true;
        }
      }, 2000);
    };
    onMounted(()=>{
      getLatestPurchase();
    });
    return{purchaseList,state,onLoad}
  }
}
</script>

<style scoped>
.latestpurchase{
  width: 100%;
  box-sizing: border-box;
  background: #fbfbfb;
  padding-top: 97px;
}
.latestpurchase p{
  margin: 0;
  box-sizing: border-box;
  padding: 0 5px;
}
.latestpurchase ul{
  width: 100%;
  padding: 0 5px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.latestpurchase ul li{
  border-radius: 10px;
  margin: 10px 0;
  width: 48%;
  background: #fff;
  overflow: hidden;
  box-sizing: border-box;
  
}
.latestpurchase ul li img{
  width: 100%;
}
.latestpurchase .title{
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
  font-weight: 500;
  color: #333333;
}
.latestpurchase .position{
  color: #333333;
  font-size: 12px;
}
.latestpurchase .position em{
  margin-right: 8px;
}
.latestpurchase .honer{
  font-size: 14px;
  margin-top: 10px;
  color: #4ddd89;
}
.latestpurchase .honer span{
  text-align: center;
  line-height: 16px;
  width: 65px;
  border-radius: 5px;
  height: 16px;
  border: 1px solid #4ddd89;
  display: inline-block;
}
.latestpurchase .honer span:nth-child(1){
  margin-right: 15px;
}
.latestpurchase .price{
  font-size: 16px;
  margin: 10px 0 5px 0;
  color: #ff6600;
}
.latestpurchase .price span{
  font-weight: 900;
}
.latestpurchase .more{
  width: 90%;
  height: 50px;
  background: #fff;
  margin-bottom: 20px;
  margin: 0 auto;
  border-radius: 10px;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
}
</style>